
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>快速查询</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item" pane>
            <label class="layui-form-label">正则表达式:</label>
            <div class="layui-input-block">
                <input type="text" id="regex" name="regex" lay-reqText="请选择条件" lay-verify="required" placeholder="请选择条件"
                    autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">选择：</label>
            <div class="layui-input-block">
                <input type="radio" name="qs" value="_div" title="自定义" lay-filter="qs">
                <input type="radio" name="qs" value="^-" title="负数（包括-0）" lay-filter="qs">
                <input type="radio" name="qs" value="^(?!-)" title="正数（包括0）" lay-filter="qs">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即查询</button>
                <button type="reset" id="cancle" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
    <script src="./layui/layui.all.js"></script>
    <script>
        ; !function () {
            var form = layui.form;
            var regexInput = document.getElementById('regex');
            var calcelBtn = document.getElementById('cancle');
            calcelBtn.addEventListener('click', function (e) {
                try {
                    console.log('cancle');
                } catch (error) {
                    console.error(error);
                } finally {
                    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
                }
            })
            //监听提交
            form.on('submit(*)', function (data) {
                try {
                    console.log(JSON.stringify(data));
                    var regex = data.regex;
                    parent.postMessage({ pluginMessage: { type: 'query', regex } }, '*')
                } catch (error) {
                    console.error(error);
                } finally {
                    return false;
                }
            });
            form.on('radio(qs)', function (data) {
                if (data.value === '_div') {
                    regexInput.removeAttribute('disabled');
                    regexInput.setAttribute('placeholder', '请输入正则表达式');
                } else {
                    regexInput.setAttribute('disabled', true);
                    regexInput.value = data.value;
                }
            });
        }();
    </script>
</body>

</html>